/*
  学习目标：解决this指向undefined的三种方式
  
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 2. 使用箭头函数定义事件处理函数
  handleClick2 = () => {
    console.log('this  ----->  ', this);
  };

  handleClick() {
    console.log('this  ----->  ', this);
  }

  render() {
    return (
      <div>
        <button
          // 1. 少量代码, 使用事件箭头函数绑定事件
          onClick={() => this.handleClick()}
        >
          点我1
        </button>

        <button onClick={this.handleClick2}>点我2</button>

        <button
          // 3. 👎 ES5中使用bind主动改变this指向为render中的this
          onClick={this.handleClick.bind(this)}
        >
          点我3
        </button>
      </div>
    );
  }
}
